<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝导航案例</title>
</head>
<style>
  a{
    background-color: darkgrey;
    color: white;
    width: 200px;
    height: 26px;
    font-size: 16px;
    /*当文字的行高等于盒子的高度的时候 可以实现垂直居中（在盒子上下的的正中间）*/
    line-height: 26px;
    text-indent: 35px;
    text-decoration: none;
    display: block;
  }
  a:hover{
    background-color: chocolate;
    color: black;
  }
</style>
<body>
<div>
  <a href="#">女装</a>
  <a href="#">手机 电视</a>
  <a href="#">电脑 笔记本</a>
  <a href="#">数码 电子</a>
  <a href="#">工具</a>

</div>
</body>
</html>